<template>
    <div>
        <swiper :options="swiperOption" ref="mySwiper" class="banner">
            <!-- slides -->
            <swiper-slide v-for="(item,i) in detailList" :key="i">
                <img :src="item.img" alt="" @click="showPreview(i)">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import {mapActions} from 'vuex'
    import '@/mock'
    import {ImagePreview} from 'vant';
    export default {
        name: "swipter",
        components: {
            swiper,
            swiperSlide
        },
        data() {
            return {
                swiperOption: {
                    autoplay: {
                        delay: 1000
                    },
                    loop: true,
                    pagination: {
                        el: ".swiper-pagination"
                    },
                },
                detailList: [],
            };
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        methods: {
            ...mapActions(['getdetailList']),
            showPreview(i) {
                ImagePreview({images:this.detailList.map(res=>res.img),startPosition: i,});
            }
        },
        created() {
            this.getdetailList().then(res => {
                this.detailList = res.data.detailList
            })
        }
    }
</script>

<style scoped>
    .banner {
        height: 250px;
    }
</style>